<template>
  <div class="missionWp">
    <CD :class="{'r5':r5,'r60':r60}" />
    <F :isShow="failed" />
    <ul class="cardWp">
      <li v-for="(item,i) in newImgArr" :class="'row'+Math.floor(i/4)" :key="i">
        <div :class="divshow[i]?'showback':'showfront'" @click="transformFun(i,item.type)">
          <div :style="`background-image: url(${item.url});background-size: 66px 80px;`"></div>
          <div class="bgs"></div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      r5: true,
      r60: false,
      failed: false,
      imgArr: [
        { type: "c0", url: require("../assets/c0.png") },
        { type: "c1", url: require("../assets/c1.png") },
        { type: "c2", url: require("../assets/c2.png") },
        { type: "c3", url: require("../assets/c3.png") },
        { type: "c4", url: require("../assets/c4.png") },
        { type: "c5", url: require("../assets/c5.png") },
        { type: "c6", url: require("../assets/c6.png") },
        { type: "c7", url: require("../assets/c7.png") },
        { type: "c0", url: require("../assets/c0.png") },
        { type: "c1", url: require("../assets/c1.png") },
        { type: "c2", url: require("../assets/c2.png") },
        { type: "c3", url: require("../assets/c3.png") },
        { type: "c4", url: require("../assets/c4.png") },
        { type: "c5", url: require("../assets/c5.png") },
        { type: "c6", url: require("../assets/c6.png") },
        { type: "c7", url: require("../assets/c7.png") }
      ],
      divshow: [],
      matched: 0,
      firstType: "",
      firstI: "",
      secondType: "",
      secondI: ""
    };
  },
  computed: {
    newImgArr() {
        return this.imgArr
    //   return this.imgArr.sort(() => {
    //     return Math.random() > 0.5 ? 1 : -1;
    //   });
    }
  },
  watch: {
    matched() {
      if (this.matched == 8) {
        this.goNext();
      }
    }
  },
  methods: {
    start() {
      if (this.r60) {
        this.failed = true;
        return;
      }
      this.r5 = false;
      for (let i = 0; i < 16; i++) {
        this.divshow.push(true);
      }
      this.r60 = true;
    },
    goNext() {
      this.$su.show();
      this.r60 = false;
      setTimeout(() => {
        this.$su.hide();
        this.$router.push("dierguan");
      }, 2000);
    },
    transformFun(i, type) {
      // 正面的牌不能点
      if (!this.divshow[i]) {
        return;
      }
      // 两张牌正在比较时，不能点
      if(this.firstType&&this.secondType){
          return
      }
      // 先存第一张牌的类型和索引，再存第二张
      if (!this.firstType) {
        this.firstType = type;
        this.firstI = i;
      } else {
        this.secondType = type;
        this.secondI = i;
      }
      // 被点的牌转正
      this.divshow.splice(i, 1, false);
      // 延时1.5s进行比较、展示
      setTimeout(() => {
        if (this.secondType && this.firstType !== this.secondType) {
          this.divshow.splice(this.firstI, 1, true);
          this.divshow.splice(this.secondI, 1, true);
          this.firstType = "";
          this.firstI = "";
          this.secondType = "";
          this.secondI = "";
        }
        if (this.secondType && this.firstType == this.secondType) {
          this.matched++;
          this.firstType = "";
          this.firstI = "";
          this.secondType = "";
          this.secondI = "";
        }
      }, 1500);
    }
  },
  mounted() {
    addEventListener("animationend", this.start);
  }
};
</script>

<style scoped>
.missionWp {
  background-color: #e78200;
  height: 568px;
}
.cardWp {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  align-items: center;
}
.cardWp li > div {
  position: relative;
  height: 80px;
  width: 66px;
  margin: 8px 3px;
  transform-style: preserve-3d;
}
.cardWp li div div {
  height: 80px;
  width: 66px;
  position: absolute;
}
.bgs {
  transform: rotateY(180deg);
  top: 0;
  left: 0;
  z-index: 99;
}
div.showback {
  transform: rotateY(180deg);
  transition: transform 1s;
}
div.showfront {
  transform: rotateY(0deg);
  transition: transform 1s;
}
.row0 .bgs {
  background-image: url("../assets/bg1.png");
  background-size: 66px 80px;
}
.row1 .bgs {
  background-image: url("../assets/bg2.png");
  background-size: 66px 80px;
}
.row2 .bgs {
  background-image: url("../assets/bg3.png");
  background-size: 66px 80px;
}
.row3 .bgs {
  background-image: url("../assets/bg4.png");
  background-size: 66px 80px;
}
</style>
